<template>
  <div :style="{ opacity: sidebarShow ? '1' : '0' }" class="sidebar">
    <ul>
      <li :id="item.id" class="sidebar-item" :style="{ top: (index * 50) + 'px', left: item.left + 'px' }"
        v-for="(item, index) in sidebarList" :key="index" @mouseover="mouseover(item)" @mouseout="mouseout(item)">
        <div @click="item.action" v-if="item.action != null">
          <div class="sidebar-icon">
            <i :class="['fa', item.icon]"></i>
          </div>
          <span class="sidebar-text">{{ item.content }}</span>
        </div>
        <div v-else>
          <div class="sidebar-icon">
            <i :class="['fa', item.icon]"></i>
          </div>
          <span class="sidebar-text">{{ item.content }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import * as ContactApi from '@/api/web/contactApi'

export default {
  data () {
    return {
      sidebarShow: false,
      sidebarList: []
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    this.getRightContact();
  },
  methods: {
    mouseover (item) {
      let dom = document.getElementById(item.id);
      let style = window.getComputedStyle(dom)
      item.left = (dom.getBoundingClientRect().width - 50) * - 1;
    },
    mouseout (item) {
      item.left = 0;
    },
    top () {
      var topTime = setInterval(() => {
        document.documentElement.scrollTop -= 10; //Y轴移动-10，即向上移动10
        var t = document.documentElement.scrollTop; //定义t为滚动条在Y轴移动的距离
        if (t === 0) { //当Y轴移动距离为0时，即到底最顶部时
          clearInterval(topTime); //停止计时器
        }
      }, 1);
    },
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop) {
        this.sidebarShow = true;
      } else if (scrollTop === 0) {
        this.sidebarShow = false;
      }
    },
    getRightContact () {
      ContactApi.getRightContact()
        .then(res => {
          if (res.code == 200) {
            res.data.push({
              id: -1,
              icon: 'iconfont icon-zhiding sidebar-icon',
              content: '回到顶部',
              action: this.top
            })
            res.data.some(item => {
              item.left = 0;
            })

            this.sidebarList = res.data;

          }
          else if (res.code == 500) {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    }
  }
}
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 300px;
  right: 0px;
  z-index: 100;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  width: 50px;
}

.sidebar ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.sidebar a {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.sidebar-text {
  font-size: 14px;
  margin-right: 25px;
  display: inline-block;
}

.sidebar-text.show {
  display: inline-block;
}

.sidebar-item {
  background: #64592a;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin: 1px 0px;
  padding: 15px 0px;
  cursor: pointer;
  position: absolute;
  white-space: nowrap;
  left: 0px;
  transition: left 0.2s;
}

.sidebar-icon {
  display: inline-block;
  width: 50px;
  text-align: center;
}
</style>